<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex items-center justify-center">
        <div class="c-card">
          <button class="c-theme" @click="switchTheme()">
            <div
              class="c-theme__grid"
              :style="{ top: getTop() }"
              v-html="darkIcon + sunsetIcon + sunriseIcon + lightIcon"
            ></div>
          </button>
          <h1 class="c-card__title">变量主题</h1>
          <p class="c-card__description">循环浏览4个主题, 从最暗到最亮。</p>
          <p class="c-card__description">{{ t('success') }}{{ failStr }}</p>
          <div class="c-theme-grid">
            <button
              class="c-box"
              :data-theme="item"
              v-for="item in themes"
              :key="item"
              @click="changeTheme(item)"
              :style="itemStyle(item)"
              :class="{ 'c-box--active': themeRef == item }"
            >
              <div class="c-box__title">
                <span class="c-box__icon" v-html="iconRender(item)"></span>
                <label v-html="capitalized(item)"></label>
              </div>
              <div class="c-box__swatches">
                <span class="c-swatch" style="background: var(--bg)" title="bg"></span>
                <span class="c-swatch" style="background: var(--border)" title="border"></span>
                <span class="c-swatch" style="background: var(--surface)" title="surface"></span>
                <span
                  class="c-swatch"
                  style="background: var(--text-primary)"
                  title="text-primary"
                ></span>
                <span
                  class="c-swatch"
                  style="background: var(--text-secondary)"
                  title="text-secondary"
                ></span>
                <span class="c-swatch" style="background: var(--primary)" title="primary"></span>
                <span
                  class="c-swatch"
                  style="background: var(--text-inverse)"
                  title="text-inverse"
                ></span>
              </div>
            </button>
          </div>
          <a class="c-button" @click="switchTheme()">切换主题</a>
          <a
            class="c-button q-ml-sm"
            @click="
              () => {
                if (locale == 'zh-CN') {
                  locale = 'en-US'
                } else {
                  locale = 'zh-CN'
                }
              }
            "
            >切换语言 {{ locale }}</a
          >
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n({ useScope: 'global' })

const failStr = computed(() => t('failed'))

console.log('locale :>> ', locale.value)

const themes = ['dark', 'sunset', 'sunrise', 'light']

const themeRef = ref('dark')

const darkIcon =
  '<svg fill="currentColor" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1" title="Dark"><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"></path></svg>'

const sunsetIcon =
  '<svg fill="currentColor" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1" title="Sunset"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"></path></svg>'

const sunriseIcon =
  '<svg fill="currentColor" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1" title="Sunrise"><path d="M20 15.31 23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18V6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"></path></svg>'

const lightIcon =
  '<svg fill="currentColor" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1" title="Light"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path></svg>'

const iconRender = (theme: string) => {
  switch (theme) {
    case (theme = 'dark'):
      return darkIcon
    case (theme = 'sunset'):
      return sunsetIcon
    case (theme = 'sunrise'):
      return sunriseIcon
    case (theme = 'light'):
      return lightIcon
  }
}

const switchTheme = () => {
  const index = themes.indexOf(themeRef.value)
  if (index > 2) {
    if (themes[0]) {
      themeRef.value = themes[0]
    }
  } else {
    const id = index + 1
    if (themes[id]) {
      themeRef.value = themes[id]
    }
  }
  changeTheme(themeRef.value)
}

const itemStyle = (item: string) => {
  return {
    '--bg': `var(--${item}-bg)`,
    '--border': `var(--${item}-border)`,
    '--surface': `var(--${item}-surface)`,
    '--text-primary': `var(--${item}-text-primary)`,
    '--text-secondary': `var(--${item}-text-secondary)`,
    '--primary': `var(--${item}-primary)`,
    '--text-inverse': `var(--${item}-text-inverse)`,
  }
}

const capitalized = (word: string) => {
  return word.charAt(0).toUpperCase() + word.slice(1)
}

const changeTheme = (theme: string) => {
  themeRef.value = theme
  document.documentElement.style.setProperty('--bg', `var(--${theme}-bg)`)
  document.documentElement.style.setProperty('--border', `var(--${theme}-border)`)
  document.documentElement.style.setProperty('--surface', `var(--${theme}-surface)`)
  document.documentElement.style.setProperty('--text-primary', `var(--${theme}-text-primary)`)
  document.documentElement.style.setProperty('--text-secondary', `var(--${theme}-text-secondary)`)
  document.documentElement.style.setProperty('--primary', `var(--${theme}-primary)`)
  document.documentElement.style.setProperty('--text-inverse', `var(--${theme}-text-inverse)`)
}

const getTop = () => {
  let top = ''
  switch (themeRef.value) {
    case 'dark':
      top = '0'
      break
    case 'sunset':
      top = '-3.6rem'
      break
    case 'sunrise':
      top = '-7.1rem'
      break
    case 'light':
      top = '-10.7rem'
      break
  }
  return top
}
</script>

<style scoped>
.c-card {
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  padding: 3.2rem;
  background: var(--surface);
  position: relative;
  box-shadow:
    0.3px 0.5px 0.7px rgba(0, 0, 0, 0.08),
    0.8px 1.6px 2px -0.8px rgba(0, 0, 0, 0.08),
    2.1px 4.1px 5.2px -1.7px rgba(0, 0, 0, 0.08),
    5px 10px 12.6px -2.5px rgba(0, 0, 0, 0.08);
}

.c-card__title {
  margin: 0 0 0.8rem;
  padding: 0;
  line-height: 1.2;
  font-size: 4rem;
  color: var(--text-primary);
}

.c-card__description {
  margin: 0;
  padding: 0;
  line-height: 150%;
  font-size: 2rem;
  color: var(--text-secondary);
}

.c-button {
  display: inline-flex;
  padding: 1.2rem 2rem;
  background: var(--primary);
  border-radius: 0.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-inverse);
  font-weight: 700;
  user-select: none;
  position: relative;
  transition: all 120ms ease-out;
}

.c-button:hover,
.c-button:focus {
  outline: none;
  transform: scale(1.03);
}

.c-theme {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 0.8rem;
  padding: 0.4rem;
  transition: all 120ms ease-out;
}

.c-theme:hover,
.c-theme:focus {
  border-color: var(--border);
}

.c-theme:after,
.c-theme:before {
  content: '';
  position: absolute;
  z-index: 10;
}

.c-theme:after {
  top: 0;
  left: 0;
  right: 0;
  height: 0.8rem;
  background: linear-gradient(to bottom, var(--surface), transparent);
}

.c-theme:before {
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.8rem;
  background: linear-gradient(to top, var(--surface), transparent);
}

.c-theme:focus {
  outline: none;
}

.c-theme__grid {
  position: relative;
  width: 3.2rem;
  transition: all 240ms ease-out;
}

.c-theme svg {
  width: 3.2rem;
  height: 3.2rem;
}

.c-theme svg:focus {
  outline: none;
}

.c-box {
  display: flex;
  width: 100%;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-secondary);
  position: relative;
  padding: 1.6rem;
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  user-select: none;
  cursor: pointer;
  transition: all 120ms ease-out;
}

.c-box:hover,
.c-box:focus {
  transform: scale(1.03);
}

.c-box__title {
  display: flex;
  align-items: center;
  width: 100%;
}

.c-box__icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
}

.c-box__swatches {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.c-box--active {
  outline: 4px solid var(--primary);
}

.c-box--active:after {
  content: '√';
  position: absolute;
  top: -1.2rem;
  right: -1.2rem;
  height: 2.4rem;
  width: 2.4rem;
  background: var(--primary);
  border-radius: 999px;
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-swatch {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-right: -0.8rem;
  box-shadow:
    0px 1px 1px rgba(0, 0, 0, 0.12),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);
}

.c-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.6rem;
  margin: 3.2rem 0;
}

@media (max-width: 700px) {
  .c-theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
